<script setup>
import { computed } from "vue";
import { useRoute } from "vue-router";
import { useStore } from "vuex";

import SidenavItem from "./SidenavItem.vue";
// import SidenavCard from "./SidenavCard.vue";

const store = useStore();
const isRTL = computed(() => store.state.isRTL);



const getRoute = () => {
  const route = useRoute();
  const routeArr = route.path.split("/");
  return routeArr[1];
};
</script>
<template>
  <div
    class="collapse navbar-collapse w-auto h-auto h-100"
    id="sidenav-collapse-main"
  >
    <ul class="navbar-nav">
      <li class="nav-item">
        <sidenav-item
          to="/Home"
          :class="getRoute() === 'Home' ? 'active' : ''"
          :navText="isRTL ? 'لوحة القيادة' : '系统概览  '"
        >
          <template v-slot:icon>
            <i class="ni ni-tv-2 text-primary text-sm opacity-10"></i>
          </template>
        </sidenav-item>
      </li>
      <li class="nav-item">
        <sidenav-item
          to="/AggregationServer"
          :class="getRoute() === 'AggregationServer' ? 'active' : ''"
          :navText="isRTL ? 'لوحة القيادة' : '聚合服务器  '"
        >
          <template v-slot:icon>
            <i class="ni ni-tv-2 text-primary text-sm opacity-10"></i>
          </template>
        </sidenav-item>
      </li>
            <li class="nav-item">
        <sidenav-item
          to="/TraceServer"
          :class="getRoute() === 'TraceServer' ? 'active' : ''"
          :navText="isRTL ? 'لوحة القيادة' : '追踪服务器  '"
        >
          <template v-slot:icon>
            <i class="ni ni-tv-2 text-primary text-sm opacity-10"></i>
          </template>
        </sidenav-item>
      </li>
      <li class="nav-item">
        <sidenav-item
          to="/Clients"
          :class="getRoute() === 'Clients' ? 'active' : ''"
          :navText="isRTL ? 'لوحة القيادة' : '本地客户端  '"
        >
          <template v-slot:icon>
            <i class="ni ni-tv-2 text-primary text-sm opacity-10"></i>
          </template>
        </sidenav-item>
      </li>

      <li class="nav-item">
        <sidenav-item
          to="/LoadModel"
          :class="getRoute() === 'LoadModel' ? 'active' : ''"
          :navText="isRTL ? 'لوحة القيادة' : '导出模型  '"
        >
          <template v-slot:icon>
            <i class="ni ni-tv-2 text-primary text-sm opacity-10"></i>
          </template>
        </sidenav-item>
      </li>
    </ul>
  </div>

</template>

<!--<style>-->
<!--//.nav-item {-->
<!--//  background-color: #007bff; /* 设置背景颜色为蓝色 */-->
<!--//}-->
<!--</style>-->
